<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:body>
            <p:dialog header="Customer Detail" widgetVar="customerDialogW" resizable="false" id="customerDialog"  
                          showEffect="fade" hideEffect="explode" modal="true" >  
                    <h:form id="customerDialogForm">
                        <p:messages id="msgs"/> 

                        <h:panelGrid id="customerPanelGrid" cellpadding="4" columns="9" style="margin:0 auto;">

                            <h:outputLabel for="type" value="Type: " />
                            <p:selectOneMenu id="type" value="#{customerBackBean.selectedCustomer.type}">  
                                <f:selectItems value="#{customerBackBean.customerTypeValues}" var="t" 
                                               itemValue="#{t.label}" itemLabel="#{t.label}"/>
                            </p:selectOneMenu>
                            <p:message for="type" id="msgType" display="icon"/>

                            <h:outputLabel for="firstName" value="First Name: *" />
                            <p:inputText id="firstName" value="#{customerBackBean.selectedCustomer.firstName}" required="true" label="First Name:" size="30">
                                <f:validateLength minimum="2" maximum="255"/>  
                            </p:inputText>
                            <p:message for="firstName" id="msgfirstName" display="icon"/>

                            <h:outputLabel for="middleName" value="Middle Name: " />
                            <p:inputText id="middleName" value="#{customerBackBean.selectedCustomer.middleInitial}" label="Middle Name:" size="30">
                                <f:validateLength maximum="5"/>
                            </p:inputText>
                            <p:message for="middleName" id="msgMiddleName" display="icon"/>

                            <h:outputLabel for="lastName" value="Last Name: *" />
                            <p:inputText id="lastName" value="#{customerBackBean.selectedCustomer.lastName}" required="true" label="Last Name:" size="30">
                                <f:validateLength minimum="2" maximum="60"/>
                            </p:inputText>
                            <p:message for="lastName" id="msgLastName" display="icon"/>

                            <h:outputLabel for="alias" value="Alias: " />
                            <p:inputText id="alias" value="#{customerBackBean.selectedCustomer.alias}" label="Alias:" size="30">
                                <f:validateLength minimum="2" maximum="255"/>
                            </p:inputText>
                            <p:message for="alias" id="msgAlias" display="icon"/>

                            <h:outputLabel for="company" value="Company: " />
                            <p:inputText id="company" value="#{customerBackBean.selectedCustomer.company}" label="Company:" size="30">
                                <f:validateLength maximum="255"/>
                            </p:inputText>
                            <p:message for="company" id="msgCompany" display="icon"/>

                            <h:outputLabel for="street" value="Street: *" />
                            <p:inputText id="street" value="#{customerBackBean.selectedCustomer.street}" required="true" label="Street:" size="30">
                                <f:validateLength minimum="2" maximum="255" />  
                            </p:inputText>
                            <p:message for="street" id="msgStreet" display="icon"/>

                            <h:outputLabel for="suite" value="Suite: " />
                            <p:inputText id="suite" value="#{customerBackBean.selectedCustomer.suite}" label="Suite:" size="30">
                                <f:validateLength maximum="50" />  
                            </p:inputText>
                            <p:message for="suite" id="msgSuite" display="icon"/>

                            <h:outputLabel for="city" value="City: *" />
                            <p:inputText id="city" value="#{customerBackBean.selectedCustomer.city}" required="true" label="City:" size="30">
                                <f:validateLength minimum="2" maximum="255"/>  
                            </p:inputText>
                            <p:message for="city" id="msgCity" display="icon"/>

                            <h:outputLabel for="state" value="State: *" />
                            <p:inputText id="state" value="#{customerBackBean.selectedCustomer.state}" required="true" label="State:" size="2">
                                <f:validateLength minimum="2" maximum="2"/>  
                            </p:inputText>
                            <p:message for="state" id="msgState" display="icon"/>

                            <h:outputLabel for="zip" value="ZIP: *" />
                            <p:inputMask id="zip" value="#{customerBackBean.selectedCustomer.zip}"  mask="99999?-9999" required="true" label="ZIP:" size="30">
                                <f:validateLength minimum="2" maximum="30"/>
                            </p:inputMask>
                            <p:message for="zip" id="msgZip" display="icon"/>

                            <h:outputLabel for="country" value="Country: *" />
                            <p:inputText id="country" value="#{customerBackBean.selectedCustomer.country}" required="true" label="Country:" size="30">
                                <f:validateLength minimum="2" maximum="30"/>  
                            </p:inputText>
                            <p:message for="country" id="msgCountry" display="icon"/>

                            <h:outputLabel for="phone" value="Phone: *" />
                            <p:inputMask id="phone" value="#{customerBackBean.selectedCustomer.phone}" mask="(999) 999-9999? x99999" required="true" label="Phone:" size="30"> 
                                <f:validateLength minimum="2" maximum="255"/>
                            </p:inputMask>
                            <p:message for="phone" id="msgPhone" display="icon"/>

                            <h:outputLabel for="otherphone" value="Other Phone: " />
                            <p:inputMask id="otherphone" value="#{customerBackBean.selectedCustomer.otherPhone}" mask="(999) 999-9999? x99999" label="Other Phone:" size="30"> 
                                <f:validateLength maximum="30"/>
                            </p:inputMask>
                            <p:message for="otherphone" id="msgOtherPhone" display="icon"/>

                            <h:outputLabel for="celular" value="Celular: " />
                            <p:inputMask id="celular" value="#{customerBackBean.selectedCustomer.celular}" mask="(999) 999-9999? x99999" label="Celular:" size="30"> 
                                <f:validateLength maximum="30"/>
                            </p:inputMask>
                            <p:message for="celular" id="msgCelular" display="icon"/>

                            <h:outputLabel for="email" value="E-mail: " />
                            <p:inputText id="email" value="#{customerBackBean.selectedCustomer.email}" label="E-mail:" size="30">
                                <f:validateLength maximum="255"/>
                            </p:inputText>
                            <p:message for="email" id="msgEmail" display="icon"/>

                            <h:outputLabel for="airRate" value="Air Rate: *" />
                            <p:inputText id="airRate" value="#{customerBackBean.selectedCustomer.airRate}" required="true" label="Air Rate:" size="5">
                                <f:convertNumber pattern="#0.00" />
                                <f:validateLength maximum="6"/>
                            </p:inputText>
                            <p:message for="airRate" id="msgairRate" display="icon"/>

                            <h:outputLabel for="oceanRate" value="Ocean Rate: *" />
                            <p:inputText id="oceanRate" value="#{customerBackBean.selectedCustomer.oceanRate}" required="true" label="Ocean Rate:" size="5">
                                <f:convertNumber pattern="#0.00" />
                                <f:validateLength maximum="6"/>
                            </p:inputText>
                            <p:message for="oceanRate" id="msgoceanRate" display="icon"/>

                            <h:outputLabel for="pickupRate" value="Pickup Rate: *" />
                            <p:inputText id="pickupRate" value="#{customerBackBean.selectedCustomer.pickupRate}" required="true" label="Pickup Rate:" size="5">
                                <f:convertNumber pattern="#0.00" />
                                <f:validateLength maximum="6"/>
                            </p:inputText>
                            <p:message for="pickupRate" id="msgPickupRate" display="icon"/>

                            <h:outputLabel for="cubic" value="Cubic: *" />
                            <p:inputText id="cubic" value="#{customerBackBean.selectedCustomer.cubic}" required="true" label="Cubic:" size="5">
                                <f:convertNumber pattern="#0.00" />
                                <f:validateLength maximum="6"/>
                            </p:inputText>
                            <p:message for="cubic" id="msgCubic" display="icon"/>

                            <h:outputLabel for="comments" value="Comments: " />
                            <p:inputText id="comments" value="#{customerBackBean.selectedCustomer.comments}" label="Comments:" size="30">
                                <f:validateLength maximum="255"/>
                            </p:inputText>                                
                            <p:message for="comments" id="msgComments" display="icon"/>

                            <p:commandButton value="Save" type="submit" update="customerDialogForm" actionListener="#{customerBackBean.saveCustomer}" icon="ui-icon-check"/>  
                            <p:commandButton value="Close" 
                                             type="submit" 
                                             onclick="customerDialogW.hide();" 
                                             label="Close" 
                                             process="@parent" 
                                             actionListener="#{customerBackBean.reset}" 
                                             title="Close" 
                                             update=":form:customerTable" 
                                             icon="ui-icon-close"/>
                        </h:panelGrid>
                    </h:form>    
                </p:dialog>
    </h:body>

</html>
